<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="12" md="8">
          <v-card height="100%" class="mx-auto">
            <v-container>
              <v-list-item class="py-7">
                <v-list-item-avatar
                  size="64"
                  style="cursor:pointer;"
                  @click="$router.push(`/creater/${article.name[0]}`)"
                >
                  <v-img class="elevation-6" :src="article.name[1]"></v-img>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title class="headline pb-4 font-weight-bold">{{
                    article.title
                  }}</v-list-item-title>
                  <v-list-item-subtitle>{{
                    article.name[0]
                  }}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-card-text>
                  <div class="dialog-h5" v-html="article.content"></div>
              </v-card-text>
            </v-container>
          </v-card>
        </v-col>
        <v-col cols="12" md="4"> </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {
        name: [],
        content: {}
      }
    };
  },
  created() {
    this.fetchArticle();
  },
  methods: {
    async fetchArticle() {
      try {
        const res = await this.$http.get(`article/?id=36`);
        this.article = res.data.list[0].fields;
        this.article.cover_image = require(this.article.cover_image);
        console.log(this.article);
      } catch (e) {
        console.log("图片获取失败");
      }
    }
  }
};
</script>

<style scoped>

.dialog-h5 >>> img,
p,
span {
  width: 100%;
  padding-top: 20px;
}
.dialog-h5 >>> iframe{
  width: 100%;
}
@media screen and (min-width: 415px){
  .dialog-h5 >>> iframe{
  width: 100%;
  height: 360px;
}}
</style>
